import React, { Component } from 'react';
import { StatusBar } from 'react-native';
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation';
import HomeScreen from "./HomeScreen";
import ProfileScreen from './ProfileScreen';
import DetailScreen from './DetailScreen';

export default class RootScreen extends Component {

  constructor(props) {
    super(props);
    StatusBar.setBarStyle('light-content')
    StatusBar.setBackgroundColor('#2196f3')
  }

  render() {
    return (
      <Navigator />
    )
  }
}

const Tab = TabNavigator(
  {
    Init: {
      screen: HomeScreen,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: '首页'
      }),
    },
    First: {
      screen: ProfileScreen,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: '我的'
      }),
    },
  },
  {
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    swipeEnabled: true,
    animationEnabled: true,
    lazy: true,
    tabBarOptions: {
      inactiveTintColor: '#888888',
      style: { backgroundColor: '#ffffff' }
    }
  }
);

const Navigator = StackNavigator(
  {
    Tab: { screen: Tab },
    Detail: { screen: DetailScreen }
  },
  {
    navigationOptions: {
      headerBackTitle: null,
      showIcon: false
    }
  }
);

